<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">{{isEdit ? '编辑就诊记录' : '添加就诊记录'}}</view>
            <view class="right">
                <u-icon name="checkmark" size="32" color="#333" @click="saveRecord"></u-icon>
            </view>
        </view>
        
        <!-- 基本信息 -->
        <view class="section">
            <view class="title">基本信息</view>
            <view class="form">
                <view class="form-item">
                    <view class="label">就诊时间</view>
                    <picker 
                        mode="date" 
                        :value="record.time" 
                        @change="onDateChange"
                        class="picker"
                    >
                        <view class="value">{{record.time || '请选择就诊时间'}}</view>
                    </picker>
                </view>
                
                <view class="form-item">
                    <view class="label">医院</view>
                    <input 
                        type="text" 
                        v-model="record.hospital" 
                        placeholder="请输入医院名称"
                        class="input"
                    />
                </view>
                
                <view class="form-item">
                    <view class="label">科室</view>
                    <input 
                        type="text" 
                        v-model="record.department" 
                        placeholder="请输入科室名称"
                        class="input"
                    />
                </view>
                
                <view class="form-item">
                    <view class="label">医生</view>
                    <input 
                        type="text" 
                        v-model="record.doctor" 
                        placeholder="请输入医生姓名"
                        class="input"
                    />
                </view>
                
                <view class="form-item">
                    <view class="label">就诊状态</view>
                    <view class="radio-group">
                        <view 
                            class="radio" 
                            :class="{'active': record.status === 'pending'}"
                            @click="record.status = 'pending'"
                        >待复诊</view>
                        <view 
                            class="radio" 
                            :class="{'active': record.status === 'completed'}"
                            @click="record.status = 'completed'"
                        >已完成</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 诊断信息 -->
        <view class="section">
            <view class="title">诊断信息</view>
            <view class="form">
                <view class="form-item">
                    <view class="label">诊断结果</view>
                    <textarea 
                        v-model="record.diagnosis" 
                        placeholder="请输入诊断结果"
                        class="textarea"
                    ></textarea>
                </view>
            </view>
        </view>
        
        <!-- 治疗方案 -->
        <view class="section">
            <view class="title">治疗方案</view>
            <view class="form">
                <view class="form-item">
                    <view class="label">治疗方案</view>
                    <textarea 
                        v-model="record.treatment" 
                        placeholder="请输入治疗方案"
                        class="textarea"
                    ></textarea>
                </view>
            </view>
        </view>
        
        <!-- 图片上传 -->
        <view class="section">
            <view class="title">相关图片</view>
            <view class="upload">
                <view class="image-list">
                    <view 
                        class="image-item" 
                        v-for="(item, index) in record.images" 
                        :key="index"
                    >
                        <image :src="item" mode="aspectFill"></image>
                        <view class="delete" @click="deleteImage(index)">
                            <u-icon name="close" size="24" color="#fff"></u-icon>
                        </view>
                    </view>
                    <view class="upload-btn" @click="chooseImage" v-if="record.images.length < 9">
                        <u-icon name="plus" size="32" color="#999"></u-icon>
                        <text>上传图片</text>
                    </view>
                </view>
                <view class="tip">最多可上传9张图片</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isEdit: false,
            record: {
                time: '',
                hospital: '',
                department: '',
                doctor: '',
                status: 'pending',
                diagnosis: '',
                treatment: '',
                images: []
            }
        }
    },
    onLoad(options) {
        if (options.id) {
            this.isEdit = true
            // 模拟加载数据
            this.record = {
                time: '2024-03-15',
                hospital: '北京协和医院',
                department: '神经内科',
                doctor: '张医生',
                status: 'completed',
                diagnosis: '脑卒中后遗症',
                treatment: '1. 继续服用阿司匹林\n2. 定期复查\n3. 保持适当运动',
                images: [
                    '/static/images/record1.jpg',
                    '/static/images/record2.jpg'
                ]
            }
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        onDateChange(e) {
            this.record.time = e.detail.value
        },
        saveRecord() {
            // 表单验证
            if (!this.record.time) {
                uni.showToast({
                    title: '请选择就诊时间',
                    icon: 'none'
                })
                return
            }
            if (!this.record.hospital) {
                uni.showToast({
                    title: '请输入医院名称',
                    icon: 'none'
                })
                return
            }
            if (!this.record.department) {
                uni.showToast({
                    title: '请输入科室名称',
                    icon: 'none'
                })
                return
            }
            if (!this.record.doctor) {
                uni.showToast({
                    title: '请输入医生姓名',
                    icon: 'none'
                })
                return
            }
            if (!this.record.diagnosis) {
                uni.showToast({
                    title: '请输入诊断结果',
                    icon: 'none'
                })
                return
            }
            if (!this.record.treatment) {
                uni.showToast({
                    title: '请输入治疗方案',
                    icon: 'none'
                })
                return
            }
            
            // 保存记录
            uni.showToast({
                title: '保存成功',
                icon: 'success'
            })
            setTimeout(() => {
                this.goBack()
            }, 1500)
        },
        chooseImage() {
            uni.chooseImage({
                count: 9 - this.record.images.length,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.record.images = [...this.record.images, ...res.tempFilePaths]
                }
            })
        },
        deleteImage(index) {
            uni.showModal({
                title: '提示',
                content: '确定要删除这张图片吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.record.images.splice(index, 1)
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        
        .form {
            .form-item {
                display: flex;
                align-items: center;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .label {
                    width: 160rpx;
                    font-size: 28rpx;
                    color: #333;
                }
                
                .picker {
                    flex: 1;
                    
                    .value {
                        font-size: 28rpx;
                        color: #333;
                        
                        &:empty::before {
                            content: '请选择就诊时间';
                            color: #999;
                        }
                    }
                }
                
                .input {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333;
                }
                
                .radio-group {
                    display: flex;
                    
                    .radio {
                        width: 120rpx;
                        height: 60rpx;
                        border: 2rpx solid #E8E8E8;
                        border-radius: 30rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 28rpx;
                        color: #666;
                        margin-right: 20rpx;
                        
                        &.active {
                            background-color: #E6F7FF;
                            border-color: #1890FF;
                            color: #1890FF;
                        }
                    }
                }
                
                .textarea {
                    flex: 1;
                    height: 200rpx;
                    font-size: 28rpx;
                    color: #333;
                    line-height: 1.6;
                }
            }
        }
        
        .upload {
            .image-list {
                display: flex;
                flex-wrap: wrap;
                
                .image-item {
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 10rpx;
                    margin-right: 20rpx;
                    margin-bottom: 20rpx;
                    position: relative;
                    
                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 10rpx;
                    }
                    
                    .delete {
                        position: absolute;
                        right: -10rpx;
                        top: -10rpx;
                        width: 40rpx;
                        height: 40rpx;
                        background-color: rgba(0, 0, 0, 0.5);
                        border-radius: 20rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
                
                .upload-btn {
                    width: 160rpx;
                    height: 160rpx;
                    border: 2rpx dashed #E8E8E8;
                    border-radius: 10rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    
                    text {
                        font-size: 24rpx;
                        color: #999;
                        margin-top: 10rpx;
                    }
                }
            }
            
            .tip {
                font-size: 24rpx;
                color: #999;
                margin-top: 10rpx;
            }
        }
    }
}
</style> 